<template>
  <div class="app-container">
    <!-- 条件过滤区 -->
    <div class="filter-container">
      <div class="filter-row">
        <div class="filter-item">
          <span class="filter-title">统计日期：</span>
          <!-- <el-date-picker
            size="small"
            :range-separator="null"
            start-placeholder="请选择时间"
            class=" search-item date-range-item"
            format="yyyy-MM-dd"
            type="datetimerange"
            v-model="searchObj.timeRange"
            value-format="yyyy-MM-dd"
          /> -->
          <el-date-picker
            size="small"
            class="search-item date-range-item"
            v-model="searchObj.timeRange"
            type="datetimerange"
            format="yyyy-MM-dd  HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :range-separator="null"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="filter-item">
          <span class="filter-title">所属区域：</span>
            <el-cascader
            size="small"
            class="search-item"
            :props="props"
            @change="handleChange"
            v-model="searchObj.areaIds"
            style="width: 300px"
          ></el-cascader>
        </div>
        <div class="filter-item">
          <el-button size="small" @click="search" class="" type="primary">
          查询
          </el-button>
          <el-button size="small" @click="reset" class="">
            重置
          </el-button>
          <!-- <el-button type="primary" size="small" @click="exportExcel" class="filter-item" plain>
            导出
          </el-button> -->
        </div>
      </div>
    </div>
    <!-- tab区 -->
    <!-- <div class="tabs-filter-container">
      <el-radio-group size="small" v-model="searchObj.areaPosition" @change="search">
        <el-radio-button label="province">全省统计</el-radio-button>
        <el-radio-button label="city">市州统计</el-radio-button>
        <el-radio-button label="district">区县统计</el-radio-button>
      </el-radio-group>
    </div> -->
    <div class="el-table el-table--fit el-table--border el-table--group el-table--enable-row-hover el-table--enable-row-transition el-table--medium">
      <div>
        <table v-loading="tabLoading" cellspacing="0" cellpadding="0" border="0" class="el-table__header" style="width: 100%;">
          <thead class="is-group has-gutter">
            <tr class="">
              <th colspan="1" rowspan="2" class="el-table_3_column_25  is-center   is-leaf el-table__cell">
                <div class="cell">序号</div>
              </th>
              <th colspan="2" rowspan="2" class="el-table_3_column_26  is-center   el-table__cell">
                <div class="cell">入口规则</div>
              </th>
              <th colspan="2" rowspan="1" class="el-table_3_column_29  is-center   el-table__cell">
                <div class="cell">风险车辆数</div>
              </th>
              <th colspan="1" rowspan="2" class="el-table_3_column_32  is-center   is-leaf el-table__cell">
                <div class="cell">出站车辆数</div>
              </th>
              <th colspan="1" rowspan="2" class="el-table_3_column_33  is-center   is-leaf el-table__cell">
                <div class="cell">入黔车辆总数</div>
              </th>
              <th colspan="1" rowspan="2" class="el-table_3_column_34  is-center   is-leaf el-table__cell">
                <div class="cell">留黔车辆总数</div>
              </th>
              <th colspan="1" rowspan="2" class="el-table_3_column_35  is-center   is-leaf el-table__cell">
                <div class="cell">风险车辆占比</div>
              </th>
              <th colspan="1" rowspan="2" class="el-table_3_column_36  is-center   is-leaf el-table__cell">
                <div class="cell">健康申报占比贡献率</div>
              </th>
              </tr>
              <tr class="">
              <th colspan="1" rowspan="1" class="el-table_3_column_29_column_30  is-center   is-leaf el-table__cell">
                <div class="cell">全省总数</div>
              </th>
              <th colspan="1" rowspan="1" class="el-table_3_column_29_column_31  is-center   is-leaf el-table__cell">
                <div class="cell">一期总数</div>
              </th>
            </tr>
          </thead>
          <tbody>
          <tr class="el-table__row">
            <td rowspan="1" colspan="1" class="el-table_3_column_25 is-center  el-table__cell">
              <div class="cell"><div>1</div></div>
            </td>
            <td rowspan="1" colspan="2" class="el-table_3_column_26_column_27  el-table__cell">
              <div class="cell">从ETC（含人工收费通道）进入高速，从ETC（含人工收费通道）离开高速的车辆数</div>
            </td>
            <td rowspan="1" colspan="1" class="el-table_3_column_29_column_30 is-center el-table__cell">
              <div class="cell"><div><span>{{tabItems[0].riskCount}}</span><br><button data-v-2509ff55="" type="button" @click="itemDetail()" class="el-button el-button--text el-button--mini" style="margin-right: 0px;"><span>查看详情</span></button></div></div>
            </td>
            <td rowspan="1" colspan="1" class="el-table_3_column_29_column_31 is-center el-table__cell"><div class="cell">{{tabItems[0].firstRiskCount}}</div></td>
            <td rowspan="3" colspan="1" class="el-table_3_column_32 is-center  el-table__cell"><div class="cell">{{tabItems[0].exitCount}}</div></td>
            <td rowspan="3" colspan="1" class="el-table_3_column_33 is-center  el-table__cell"><div class="cell">{{tabItems[0].entryCount}}</div></td>
            <td rowspan="3" colspan="1" class="el-table_3_column_34 is-center  el-table__cell"><div class="cell">{{tabItems[0].stayCount}}</div></td>
            <td rowspan="3" colspan="1" class="el-table_3_column_35 is-center  el-table__cell"><div class="cell">{{tabItems[0].riskPer}}</div></td>
            <td rowspan="3" colspan="1" class="el-table_3_column_36 is-center  el-table__cell"><div class="cell">{{tabItems[0].healthReportper}}</div></td>
          </tr>
          <tr class="el-table__row">
            <td rowspan="1" colspan="1" class="el-table_3_column_25 is-center  el-table__cell"><div class="cell"><div>2</div></div></td>
            <td rowspan="2" colspan="1" class="el-table_3_column_26_column_27  el-table__cell"><div class="cell">通过申报来源的车辆数</div></td>
            <td rowspan="1" colspan="1" class="el-table_3_column_26_column_28  el-table__cell"><div class="cell">在人工（免费）通道进入ETC（含人工收费通道）高速</div></td>
            <td rowspan="1" colspan="1" class="el-table_3_column_29_column_30 is-center  el-table__cell">
              <div class="cell"><div><span>{{tabItems[1].riskCount}}</span><br><button data-v-2509ff55="" type="button" @click="itemDetail(1, null)" class="el-button el-button--text el-button--mini" style="margin-right: 0px;"><span>查看详情</span></button></div></div>
            </td>
            <td rowspan="1" colspan="1" class="el-table_3_column_29_column_31 is-center  el-table__cell"><div class="cell">{{tabItems[1].firstRiskCount}}</div></td>
          </tr>
          <tr class="el-table__row">
            <td rowspan="1" colspan="1" class="el-table_3_column_25 is-center el-table__cell">
              <div class="cell"><div>3</div></div>
            </td>
            <td rowspan="1" colspan="1" class="el-table_3_column_26_column_28 el-table__cell">
              <div class="cell">从人工（免费）进入高速，从人工（免费）离开高速</div>
            </td>
            <td rowspan="1" colspan="1" class="el-table_3_column_29_column_30 is-center  el-table__cell">
              <div class="cell"><div>
                <span>--</span><br></div></div>
            </td>
            <td rowspan="1" colspan="1" class="el-table_3_column_29_column_31 is-center  el-table__cell">
              <div class="cell">--</div>
            </td>
          </tr></tbody>
          </table></div>
    </div>
  </div>
</template>

<script>
import areaConvert from '@/utils/areaCodeCov.js';
import { selectCarStatistics, commAreaUrl, commUserAreaUrl  } from '@/http/apiUrls.js';
import { getDateBefore } from '@/utils/date.js';
export default {
  name: 'VehicleReport',
  data() {
    return {
      tabLoading: false,
      tableKey: 0,
      pageItems: 10, // 每页查询条数
      pagination: {
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示条数
        pageCount: 1, // 总页数
      },
      tabItemTitle: [
        {
          rule: '从ETC（含人工收费通道）进入高速，从ETC（含人工收费通道）离开高速的车辆数'
        },
        {
          rule: '在人工（免费）通道进入ETC（含人工收费通道）高速'
        },
        {
          rule: '从人工（免费）进入高速，从人工（免费）离开高速'
        }
      ],
      tabItemSubTitle: '通过申报来源的车辆数',
      tabItems: [
        {},{},{}
      ],
      props: {
        lazy: true,
        checkStrictly: true,
        lazyLoad: (node, resolve) => {
          const { level } = node;
          const nodes = [];          
          let type = level == 0 ? null : node.value;
          this.provinceFn(type)
            .then((res) => {
              // 节点数组
              res.map((item) => {
                let obj = {
                  value: item.code,
                  label: item.fullName,
                  leaf: item.level >= 4
                  // leaf: node.level >= 3, 
                };
                nodes.push(obj);
              });
              // resolve 节点返回
              resolve(nodes);
            })
            .catch((error) => {
              console.log(error);
            });
        }
      },
      searchObj: this.initSearchObj(),
    }
  },
  created(){
    let date = getDateBefore(1)
    this.getData(1, this.pageItems, {
      startTime: date + ' 00:00:00',
      endTime: date + ' 23:59:59'
    }, {})
  },
  methods: {
    initSearchObj(){
      let date = getDateBefore(1)
      return {
        timeRange: [
          date + ' 00:00:00',
          date + ' 23:59:59'
        ],
        areaIds: []
      }
    },
    getSearchObj(){
      let obj = {...this.searchObj};
      if(obj.timeRange && obj.timeRange.length == 2 ){
        obj.startTime = obj.timeRange[0]
        obj.endTime = obj.timeRange[1]
      }
      const ids = obj.areaIds;
      let areaCode = '';
      if(ids && ids.length > 0){
        areaCode = ids[ids.length-1]
        let likeVal = areaConvert(areaCode);
        obj.areaCode = likeVal
      }
      return obj;
    },
    getExtraObj(){
      let extra = {};
      return extra
    },
    search(){
      this.getData(1, this.pageItems, this.getSearchObj(), this.getExtraObj())
    },
    reset(){
      this.searchObj = this.initSearchObj()
       this.getData(1, this.pageItems, this.getSearchObj(), {})
    },
    getData(current , size, model, extra){
      // let requestData = {
      //   current,
      //   size,
      //   model,
      //   extra
      // }
      this.tabLoading = true;
      this.$postJson(selectCarStatistics, model).then(res => {
        this.tabLoading = false;
        if(res){
          this.tabItems = res;
          if(this.tabItems){
            this.tabItems[0].healthReportper = this.tabItems[1].healthReportper
          }
          // if(this.tabItems[0]){
          //   
          // }
          // const pagination = {
          //   currentPage: parseInt(res.current), // 当前页面号
          //   pageSize: parseInt(res.size), // 每页条目数
          //   pageCount: parseInt(res.pages), // 总页面数
          // }
          // this.pagination = pagination;
          // this.tabItems = res.records;
        }
      })
    },
    getArea(code){
      return new Promise((resolve, reject) => {
        const requestData = {
          parentCode: code
        }
        if(code){
          this.$postJson(commAreaUrl, requestData).then(res => {
            if(res){
              resolve(res)
            }else{
              resolve([])
            }
          })
        }else{
          this.$postJson(commUserAreaUrl, {}).then(res => {
            if(res){
              resolve(res)
            }else{
              resolve([])
            }
          })
        }
      })
    },
    // 获取省市区街道
    provinceFn(code) {
      // 此处是一个promise 直接返回
      return this.getArea(code);
    },
     // 监听数据变化
    handleChange(value) {
      console.log(value);
    },
    async handleSizeChange(val) {
      this.pageItems = val
      await this.getData(1, this.pageItems, this.searchObj, this.getExtraObj())
    },
    async handleCurrentChange(val) {
      await this.getData(val, this.pageItems, this.searchObj, this.getExtraObj())
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      if(rowIndex == 0 && columnIndex == 1){
        return {
          rowspan: 1,
          colspan: 2
        }
      }
      if(columnIndex == 1 && rowIndex == 1){
        return {
          rowspan: 2,
          colspan: 1
        }
      }
      if(columnIndex >= 5){
        return {
          rowspan: 3,
          colspan: 1
        }
      }
      // if (columnIndex === 0) {
      //   if (rowIndex % 2 === 0) {
      //     return {
      //       rowspan: 2,
      //       colspan: 1
      //     };
      //   } else {
      //     return {
      //       rowspan: 0,
      //       colspan: 0
      //     };
      //   }
      // }
    },
    itemDetail(isReportRiskEntry, isReportRiskExit){
      let {areaIds, startTime, endTime, } = this.getSearchObj()
      this.$router.push({
        path: "/fk/vehicleReportList",
        query: {
          isRisk: 1, 
          areaIds:areaIds.join(','), 
          startTime, 
          endTime,
          isReportRiskEntry,
          isReportRiskExit
        }
      })
    },
    exportExcel() {
      // if (this.queryParams.timeRange) {
      //   this.queryParams.extra.createTime_st = this.queryParams.timeRange[0];
      //   this.queryParams.extra.createTime_ed = this.queryParams.timeRange[1];
      // }
      // this.queryParams.extra.fileName = '导出登录日志数据';
      // loginLogApi.export(this.queryParams).then(response => {
      //   downloadFile(response);
      // });
    },
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  .filter-row {
    width: 100%;
    margin-bottom: 8px;
    display: flex;
    .filter-item {
      width: fit-content;
      .filter-title {
        display:inline-block;
        width:100px;
        text-align:right;
        margin-left: 4px;
      }
    }
  }
  .tabs-filter-container{
    margin-bottom: 10px;
  }
}

.del_line{
  text-decoration: line-through;
}
</style>